<template>
  <a-dropdown>
    <span class="title">
      <span>{{ currentLabel }}</span>
      <i class="iconfont icon-arrow-down-s-line"></i>
    </span>
    <template #overlay>
      <a-menu>
        <a-menu-item v-for="it in options" :key="it.value" @click="onSelect(it.value, it.label)"> {{ it.label }} </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'

  type Value = string | number

  export interface Props {
    value: Value
    options: { label: string; value: Value }[]
  }
  const props = withDefaults(defineProps<Props>(), {
    options: () => []
  })
  const emits = defineEmits(['update:value', 'select'])

  const currentLabel = computed(() => props.options.find(it => it.value === props.value)?.label)

  const onSelect = (val: Value, label: string) => {
    emits('update:value', val)
    emits('select', val, label)
  }
</script>
